<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/html5shiv.min.js"></script>
</head>
<body>
<!--头部模块-->
<div class="fixed absolute">
	<div class="black"></div>
<!--头部导航条-->
	<header class="Head_title">
		<div class="wrap clearFix">
			<h1 class="logo">
				<a href="#">
					<img src="img/logo.png" />
				</a>
			</h1>
			<ul class="List">
				<li >
					<a class="nav" href="index.html">首页</a>
				</li>
				<li class="drop-menu" id="active">
					<p><a class="nav" href="privilege.html">特权与等级</a></p>
					<div class="growup" id="growup">
						<div class="mask"></div>
						<p class="wrap grade clearFix">
							<a class="Active" href="privilege.html">成长等级</a>
							<a href="#">全部特权</a>
						</p>
					</div>
				</li>
				<li>
					<a class="nav" href="active.html">最新活动</a>
				</li>
				<li>
					<a class="nav" href="annualFee.html">年费专区</a>
				</li>
				<li>
					<a class="nav" href="paybag.html" target="_blank">付费音乐包</a>
				</li>
			</ul>
			<p class="login">
				您还没有登录，<a href="#">马上登录</a>
			</p>
		</div>
	</header>
</div>
<section class="Head" id="privilege_Head">
<!--头部轮播图-->
	<div class="wrap curve clearFix">
		<h2 class="line curve_line clearFix">
			<span class="line_left"></span>
			<a class="strong" href="#">我的成长曲线</a>
			<span class="line_right"></span>
		</h2>
		<p class="activation clearFix">
			<a class="gain" href="#">激活绿钻豪华版，获得极速成长值</a>
			<a class="button" href="#">开通豪华绿钻</a>
		</p>
		<!--头部成长值曲线-->
		<div class="value">
			<!--虚线-->
			<ul class="dashed">
				<li class="dashed_1">648</li>
				<li class="dashed_2">324</li>
				<li class="dashed_3">108</li>
				<li class="dashed_4">60</li>
				<li class="dashed_5">36</li>
				<li class="dashed_6">18</li>
				<li class="dashed_7">6</li>
				<li class="dashed_8">0</li>
			</ul>
			<span class="grow_value">成长值</span>
			<span class="order">等级</span>
			<!--柱状图形-->
			<ul class="column clearFix">
				<li class="column_1">
					<span>0</span>
					<div></div>
				</li>
				<li class="column_2">
					<span>600</span>
					<div></div>
				</li>
				<li class="column_3">
					<span>1800</span>
					<div></div>
				</li>
				<li class="column_4">
					<span>3600</span>
					<div></div>
				</li>
				<li class="column_5">
					<span>6000</span>
					<div></div>
				</li>
				<li class="column_6">
					<span>10800</span>
					<div></div>
				</li>
				<li class="column_7">
					<span>32400</span>
					<div></div>
				</li>
				<li class="column_8">
					<span>64800</span>
					<div></div>
				</li>
			</ul>
			<p class="sharp"></p>
			<!--等级-->
			<p class="grade_LV clearFix">
				<span>LV1</span>
				<span>LV2</span>
				<span>LV3</span>
				<span>LV4</span>
				<span>LV5</span>
				<span>LV6</span>
				<span>LV7</span>
				<span>LV8</span>
			</p>
		</div>
	</div>
</section>
<!--页面主题-->
<main class="Main">
	<div class="wrap">
		<h3 class="line pay_line clearFix" id="line">
			<span class="line_left"></span>
			<a class="strong" href="#">绿钻豪华版</a>
			<span class="line_right"></span>
		</h3>
		<ul class="Privilege clearFix">
			<li class="P_music">
				<div class="add">
					<a href="#">
						<span class="scale"></span>
						<span class="normal">音乐特权</span>
					</a>
					<span class="delta_w"></span>
					<span class="beeline"></span>
					<span class="delta_g"></span>
				</div>
				<section class="hidden">
					<nav class="P_icon clearFix">
						<a class="icon_1" href="#">
							<span></span>
							<strong>HQ高品质音乐试听</strong>
						</a>
						<a class="icon_2" href="#">
							<span></span>
							<strong>HQ高品质音乐下载</strong>
						</a>
						<a class="icon_3" href="#">
							<span></span>
							<strong>点歌到QQ群</strong>
						</a>
						<a class="icon_4" href="#">
							<span></span>
							<strong>点送MV</strong>
						</a>
						<a class="icon_5" href="#">
							<span></span>
							<strong>HQ高品质音乐分享</strong>
						</a>
						<a class="icon_6" href="#">
							<span></span>
							<strong>上传本地音乐</strong>
						</a>
						<a class="icon_7" href="#">
							<span></span>
							<strong>设置QQ空间背景音乐</strong>
						</a>
						<a class="icon_8" href="#">
							<span></span>
							<strong>赠送QQ空间背景音乐</strong>
						</a>
						<a class="icon_9" href="#">
							<span></span>
							<strong>SQ无损音乐下载</strong>
						</a>
						<a class="icon_10" href="#">
							<span></span>
							<strong>SQ无损音乐试听</strong>
						</a>
						<a class="icon_11" href="#">
							<span></span>
							<strong>批量下载</strong>
						</a>
						<a class="icon_12" href="#">
							<span></span>
							<strong>超大云歌单</strong>
						</a>
					</nav>
				</section>
			</li>
			<li class="P_pay">
				<div class="add">
					<a href="#">
						<span class="scale"></span>
						<span class="normal">付费歌曲特权</span>
					</a>
					<span class="delta_w"></span>
					<span class="beeline"></span>
					<span class="delta_g"></span>
				</div>
			</li>
			<li class="P_status">
				<div class="add">
					<a href="#">
						<span class="scale"></span>
						<span class="normal">身份特权</span>
					</a>
					<span class="delta_w"></span>
					<span class="beeline"></span>
					<span class="delta_g"></span>
				</div>
			</li>
			<li class="P_life">
				<div class="add">
					<a href="#">
						<span class="scale"></span>
						<span class="normal">生活特权</span>
					</a>
					<span class="delta_w"></span>
					<span class="beeline"></span>
					<span class="delta_g"></span>
				</div>
			</li>
		</ul>
		<p class="open">
			<a href="#">开通豪华绿钻</a>
		</p>
	</div>
</main>
<!--页面底部-->
<footer class="About">
	<div class="wrap">
		<p class="service">
			<a href="#">关于腾讯</a>
			<span>|</span>
			<a href="#">About Tencent</a>
			<span>|</span>
			<a href="#">服务条款</a>
			<span>|</span>
			<a href="#">用户服务协议</a>
			<span>|</span>
			<a href="#">广告服务</a>
			<span>|</span>
			<a href="#">腾讯招聘</a>
			<span>|</span>
			<a href="#">客服中心</a>
			<span>|</span>
			<a href="#">网站导航</a>
		</p>
		<p class="Copyright">
			<span>Copyright © 1998 - 2017 Tencent.</span>
			<a href="#">All Rights Reserved.</a>
		</p>
		<p class="culture">
			<span>腾讯公司</span>
			<a href="#">版权所有</a>
			<a href="#"> 腾讯网络文化经营许可证</a>
		</p>
	</div>
</footer>
</body>
</html>
